<template>
    <div>
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2">
                <div class="a-3">
                    <Header v-bind:state=2></Header>
                </div>
            </div>
            <!--banner-->
            <div class="target a-9" id="target-2">
                <div>
                    <div><img src="@/assets/image/banner1.png"></div>
                    <div><img src="@/assets/image/banner2.png"></div>
                    <div><img src="@/assets/image/banner3.png"></div>
                </div>
            </div>
            <!--搜索-->
            <div class="a-10">
                <form class="a-11">
                    <input class="a-12" type="text" placeholder="请输入关键字"/>
                    <button type="button" class="a-13" @click="searchButton"><img src="@/assets/image/index-26.png"/></button>
                </form>
            </div>
            <!--消息通知-->
            <div class="a-14">
                <div class="a-15">
                    <img class="a-16" src="@/assets/image/tz.png" />
                    <div class="a-17">
                        <div class="swiper-container swiper-containerOne">
                            <div class="swiper-wrapper clearfix">
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--内容-->
        <div class="b-6">
            <div class="b-7">
                <!--路由-->
                <div class="b-8">
                    <div class="b-9">当前位置： <a href="javascript:;">首页</a> > <a href="javascript:;">版权交易</a></div>
                </div>
                <!--筛选-->
                <div class="b-10">
                    <div class="b-11">
                        <div class="b-12">
                            <label class="b-13">交易类型：</label>
                            <label class="b-14"><input name="transaction" type="radio" value="" @click="editTradingType(1)"/>项目挂牌</label>
                            <label class="b-14"><input name="transaction" type="radio" value="" @click="editTradingType(0)"/>作品挂牌</label>
                        </div>
                        <div class="b-12">
                            <label class="b-13">许&emsp;&emsp;可：</label>
                            <label class="b-14"><input name="permit" type="radio" value="" @click="eidtAllowType(0)"/>专有许可</label>
                            <label class="b-14"><input name="permit" type="radio" value="" @click="eidtAllowType(1)"/>非专有许可</label>
                        </div>
                        <div class="b-12">
                            <label class="b-13">转让类型：</label>
                            <label class="b-14"><input name="assignment" type="radio" value="" @click="editEmpowerType"/>全部</label>
                            <label class="b-14"><input name="assignment" type="radio" value="" @click="editEmpowerType(0)"/>部分转让</label>
                            <label class="b-14"><input name="assignment" type="radio" value="" @click="editEmpowerType(1)"/>全部转让</label>
                        </div>
                    </div>
                    <div class="b-15" v-if="trading_type==1">
                        <label class="b-13 b-17">类&emsp;&emsp;型：</label>
                        <ul class="b-16">
                            <li :class="project_type==null?'active':''"><a href="javascript:;">全部</a></li>
                            <li :class="project_type==item.dictValue?'active':''" v-for="(item) in projectTypeOptions" :key="item.dictCode">
                                <a class="p5 atext" style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" :title="item.dictLabel">{{item.dictLabel}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="b-15" v-if="trading_type==0">
                        <label class="b-13 b-17">类&emsp;&emsp;型：</label>
                        <ul class="b-16">
                            <li :class="works_type==null?'active':''"><a href="javascript:;">全部</a></li>
                            <li :class="works_type==item.dictValue?'active':''" v-for="(item) in worksTypeOptions" :key="item.dictCode">
                                <a class="p5 atext" style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" :title="item.dictLabel">{{item.dictLabel}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--作品列表-->
                <div class="b-18">
                    <div class="b-19">
                        <ul class="a-25 b-20">
                            <li v-for="item in productList" :key="item.product_id"><a href="javascript:;">
                                <div class="a-26">
                                    <img class="a-27" src="@/assets/image/index-10.png" />
                                    <div class="a-28"><span>{{item.empower_type==0?'部分转让':'全部转让'}}</span></div>
                                </div>
                                <div class="a-29">{{item.product_name}}</div>
                                <div class="a-30">交易类型：{{item.trading_type==0?'作品挂牌':'项目挂牌'}}</div>
                                <div class="a-30">作品类型：{{item.trading_type==0?worksTypeFormat(item):projectTypeFormat(item)}}</div>
                                <div class="a-31">
                                    <div class="a-32">￥<span>{{item.price_type==0?item.price/100:'面议'}}</span></div>
                                    <div class="a-33">
                                        <span class="a-34"><img src="@/assets/image/fa-eye.png"/><span>{{item.see_num}}</span></span>
                                        <span class="a-34"><img src="@/assets/image/index-25.png"/><span>{{$moment(item.putaway_time).format('YYYY-MM-DD HH:mm')}}</span></span>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                        <div class="a-35 b-21">
                            <a class="active" href="javascript:;">1</a>
                            <a href="javascript:;">2</a>
                            <a href="javascript:;">3</a>
                            <a href="javascript:;" style="line-height: 30px;">...</a>
                            <a href="javascript:;">20</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {productList} from '@/api/product'
    import Header from '@/views/header.vue';
    export default {
        components:{
            Header
        },
        name: "index",
        data(){
            return{
                trading_type:null,//挂牌类型
                allow_type:null, //许可类型
                empower_type:null, //转让是否全部
                project_type:null, //项目类型
                works_type:null, //作品类型

                inputText:null, //输入框的内容

                projectTypeOptions:[], //项目分类字典
                worksTypeOptions:[], //作品分类字典

                currentPage:1, //当前页
                totalPage:null, //总页数

                productList:[], //产品集合
            }
        },
        created(){
            this.getProductList();
            this.getDicts("project_type").then(response => {
                this.projectTypeOptions = response.data;
                console.log(response.data);
            });
            this.getDicts("works_type").then(response => {
                this.worksTypeOptions = response.data;
            });
        },
        methods:{
            editTradingType(e){ this.trading_type=e;}, //点击挂牌类型
            eidtAllowType(e){ this.allow_type=e;}, //点击许可类型
            editEmpowerType(e){this.allow_type=e;}, //点击转让是否全部
            //字典
            projectTypeFormat(row){
                return this.selectDictLabel(this.projectTypeOptions, row.project_type);
            },
            worksTypeFormat(row){
                return this.selectDictLabel(this.worksTypeOptions, row.works_type);
            },
            getProductList(){ //查询按钮
                let data={trading_type:this.trading_type,allow_type:this.allow_type,empower_type:this.empower_type,currentPage:this.currentPage};
                productList(data).then(response =>{
                    console.log(response);
                    this.productList=response.data.productList;
                    this.totalPage=response.data.totalPage;
                    this.currentPage=response.data.currentPage;
                })
            },
            searchButton(){ //点击搜索按钮
               this.getProductList();
            }

        }
    }
</script>

<style scoped>
    .p5{white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width:80px;
        cursor: pointer;
        word-break: keep-all;
        display: inline-block;
    }／/*不换行，超出部分隐藏且以省略号形式出现*/
    .p5:hover{
        overflow: visible;
    }
    @import "../../css/index.css";
    @import "../../css/idangerous.swiper.css";
    @import "../../css/list_works.css";

</style>